<template>
  <div class="goods-recommend">
    <div class="buttons">
      <el-button @click="addHomeGoods" style="color: #3b4249 !important;">新增</el-button>
    </div>
    <div class="table">
      <el-table
        :data="homeGoodsList"
        style="width: 100%">
        <el-table-column
          prop="spuNo"
          label="商品编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="spuName"
          label="商品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="spuImage"
          label="商品图片">
          <template slot-scope="{row}">
            <el-image :src="row.spuImage"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          label="推荐词">
        </el-table-column>
        <el-table-column
          prop="sortNo"
          label="排序号">
        </el-table-column>
        <el-table-column
          prop="type"
          label="推荐类型">
          <template slot-scope="{row}">
            {{homeGoodsTypeOptions.filter(item => item.value === row.type)[0].label}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="{row}">
            <el-button @click="edit(row)" size="small" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button @click="remove(row)" size="small" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="首页商品推荐"
      :visible.sync="dialogParams.visible"
      width="40%"
      :before-close="handleDialogVisible">
      <component :is="dialogParams.currentComp" :params="goodsRecommend" ref="currentCompRef"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogVisible">取 消</el-button>
        <el-button type="primary" @click="handleDoSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addGoodsRecommend from './add-goods-recommend'
export default {
  name: 'goods-recommend',
  data() {
    return {
      homeGoodsList: [],
      dialogParams: {
        visible: false,
        currentComp: addGoodsRecommend
      },
      homeGoodsTypeOptions: [
        {value: 'firstLevel', label: '一级'},
        {value: 'secondLevel', label: '二级'}
      ],
      goodsRecommend: null
    }
  },
  mounted() {
    this.queryHomeGoodsList()
  },
  methods: {
    queryHomeGoodsList() {
      this.$http({
        url: this.$http.adornUrl('/mall/homegoods/list'),
        method: 'get'
      }).then(({data}) => {
        this.homeGoodsList = data.page.list
      })
    },
    addHomeGoods() {
      this.goodsRecommend = null
      // 打开首页商品对话框
      this.dialogParams.currentComp = addGoodsRecommend
      this.handleDialogVisible()
    },
    edit(row) {
      this.goodsRecommend = row
      this.handleDialogVisible()
    },
    remove(row) {
      this.$confirm('确定删除该条记录吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/mall/homegoods/delete'),
          method: 'post',
          data: [row.serialNo]
        }).then(({data}) => {
          if (data.code === 0) {
            this.$message.success('删除成功！')
            this.queryHomeGoodsList()
          }
        })
      })
    },
    handleDialogVisible() {
      this.goodsRecommend = null
      this.dialogParams.visible = !this.dialogParams.visible
    },
    handleDoSure() {
      this.$refs['currentCompRef'].doSure().then(({data}) => {
        if (data.code !== 0) {
          this.$message.error(data.msg)
        } else {
          this.$message.success('操作成功！')
          this.handleDialogVisible()
          this.$refs['currentCompRef'].clearData()
          this.queryHomeGoodsList()
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
